<template>
	<div class="user">
		<div class="content">
			<div class="info">
				<div class="info-left">
					<div class="name">{{ userInfo.nickname }}</div>
					<div class="phone">
						<div>手机号：</div>
						<div v-if="userInfo.phone">
							{{ userInfo.phone }}
						</div>
						<div v-else class="text-btn" @click="bindPhoeShoe = true">
							绑定手机号
						</div>
					</div>
					<div class="price">
						<span style="margin-right: 20px;">当前余额：￥{{ userInfo.price }}</span>
						<van-tag type="primary" v-if="userInfo.chongzhi=='1'">普通充值</van-tag>
						<van-tag type="success" v-if="userInfo.chongzhi=='2'">自由充值</van-tag>
					</div>
				</div>
				<div class="info-right">
					<van-image width="60" height="60" :src="userInfo.logo" />
				</div>
			</div>
			<div class="cw">
				<van-cell-group inset>
					<van-cell title-style="font-weight: 500;" title="财务" value="" />
					<van-cell :title="`可用金额 ￥${userInfo.yue}`">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoWidthDraw">提现</div>
								<div class="shu"></div>
								<div class="action" @click="handleGoRecord">明细</div>
							</div>
						</template>
					</van-cell>
					<van-cell :title="`待生效金额 ￥${userInfo.dsx}`" value="" />
					<van-cell title="我的银行卡">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoBank">查看</div>
							</div>
						</template>
					</van-cell>
				</van-cell-group>
			</div>
			<div class="zd">
				<van-cell-group inset>
					<van-cell title-style="font-weight: 500;" title="转单" value="" />
					<van-cell title="转单记录">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoOrder">查看</div>
							</div>
						</template>
					</van-cell>
					<van-cell title="销售记录">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoSale">查看</div>
							</div>
						</template>
					</van-cell>
					<van-cell title="售后记录">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoAfterSale">去处理</div>
							</div>
						</template>
					</van-cell>
					<!-- 2024-5-31 hdd新增售后管理功能 -->
					<van-cell title="售后管理">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handle_manager">查看</div>
							</div>
						</template>
					</van-cell>
					<van-cell title="购买记录">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoABuyrecord">查看</div>
							</div>
						</template>
					</van-cell>
					<van-cell title="我的推广">
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoMyPro">查看</div>
							</div>
						</template>
					</van-cell>
					<van-cell title="开票管理" >
						<template #right-icon>
							<div class="right-inner">
								<div class="action" @click="handleGoOpenTicket">查看</div>
							</div>
						</template>
					</van-cell>
				</van-cell-group>
			</div>
			<BindPhone :show="bindPhoeShoe" @cancel="handlePhoneCancel" @confirm="handleBindPhoneConfirm"></BindPhone>
		</div>

		<van-tabbar :safe-area-inset-bottom="true" route>
			<van-tabbar-item replace url="https://wx.yewudaotech.com/supply.html" icon="home-o">列表</van-tabbar-item>
			<van-tabbar-item replace to="/businesspush" icon="guide-o">发布</van-tabbar-item>
			<van-tabbar-item replace to="/user" icon="contact-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { useRouter } from "vue-router";
	import { userInfoApi } from "@/api/user";
	import { getCookie } from "@/utils/index";
	import { BindPhone } from "@/components";
	import { userphoneApi } from '@/api/detail'
	import { showLoadingToast, showSuccessToast, showToast } from 'vant';
	const router = useRouter();
	const userInfo = ref();
	const bindPhoeShoe = ref(false)
	const handlePhoneCancel = () => {
		bindPhoeShoe.value = false
	}
	
	const handleBindPhoneConfirm = async (phone : string) => {
		bindPhoeShoe.value = false
		let loading = showLoadingToast({
			duration: 0,
			message: '请稍后...',
			forbidClick: true,
		});
		let { code, msg } = await userphoneApi({ uid: getCookie("token") ? Number(getCookie("token")) : '', phone })
		if (code === 0) {
			loading.close()
			showSuccessToast({
				message: '绑定成功',
				position: 'top'
			})
			getUserInfo()
		} else {
			showToast({
				message: msg,
				position: 'top'
			})
		}

	}
	const getUserInfo = async () => {
		let { data } = await userInfoApi({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
		});
		localStorage.setItem("userInfo", JSON.stringify(data));
		userInfo.value = data;
	};
	getUserInfo();
	const handleGoOrder = () => {
		router.push("/orderlist");
	};
	const handleGoBank = () => {
		router.push("/banklist");
	}
	const handleGoSale = () => {
		router.push("/salelist");
	};
	const handleGoAfterSale = () => {
		router.push("/aftersalelist");
	};
	const handleGoWidthDraw = () => {
		router.push("/widthdraw");
	};
	const handleGoRecord = () => {
		router.push("/record");
	};
	const handleGoABuyrecord = () => {
		router.push("/buyrecord");
	};
	// hdd新增 售后管理 
	const handle_manager = () => {
		router.push("/afterBuy");
	}
	// hdd新增 我的推广
	const handleGoMyPro = () => {
		router.push("/myPro");
	}
	const handleGoOpenTicket = () => {
		router.push("/openTicket");
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>